@import "~antd/lib/style/themes/default.less";
@import "~@/utils/utils.less";

.cardList {
	margin-bottom: -24px;

	.card {
		:global {
			.ant-card-meta-title {
				margin-bottom: 12px;

				&>a {
					display: inline-block;
					max-width: 100%;
					color: @heading-color;
				}
			}

			.ant-card-actions {
				background: #f7f9fa;
			}

			.ant-card-body:hover {
				.ant-card-meta-title>a {
					color: @primary-color;
				}
			}
		}
	}

	.item {
		height: 64px;
	}

	:global {
		.ant-list .ant-list-item-content-single {
			max-width: 100%;
		}
	}
}

.extraImg {
	width: 195px;
	margin-top: -60px;
	text-align: center;

	img {
		width: 100%;
	}
}

.newButton {
	width: 100%;
	height: 179px;
	color: @text-color-secondary;
	background-color: #fff;
	border-color: #e8e8e8;
	border-radius: @border-radius-sm;
}

.cardAvatar {
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	background-color: #3E5BFF;
	border-radius: 25px;
	box-shadow: 0px 4px 16px 0px rgba(62, 91, 255, 0.38);
	margin-right: 12px;
	margin-left: 18px
}

.cardDescription {
	.textOverflowMulti();
}

.pageHeaderContent {
	position: relative;
}

.contentLink {
	margin-top: 16px;

	a {
		margin-right: 32px;

		img {
			width: 24px;
		}
	}

	img {
		margin-right: 8px;
		vertical-align: middle;
	}
}

@media screen and (max-width: @screen-lg) {
	.contentLink {
		a {
			margin-right: 16px;
		}
	}
}

@media screen and (max-width: @screen-md) {
	.extraImg {
		display: none;
	}
}

@media screen and (max-width: @screen-sm) {
	.pageHeaderContent {
		padding-bottom: 30px;
	}

	.contentLink {
		position: absolute;
		bottom: -4px;
		left: 0;
		width: 1000px;

		a {
			margin-right: 16px;
		}

		img {
			margin-right: 4px;
		}
	}
}

.icon {
	margin: 0 5px;
}

.knowledgeTab {
	:global {
		.ant-tabs-nav {
			margin-top: 10px;
		}

		.ant-tabs-nav .ant-tabs-tab-active {
			background: #e6ecf6;
			text-align: left !important;
			position: relative;
		}

		.ant-tabs-nav .ant-tabs-tab {
			text-align: left !important;
		}

		.ant-tabs-content .ant-tabs-tabpane-active {
			min-height: 500px;
			padding-bottom: 80px
		}
	}

	.knowledgeTabBtn {
		position: absolute;
		bottom: 24px;
		right: 24px;
	}
}

.winColorBox {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}

.webWinColor {
	border-radius: 5px;
	background: #169bd5;
	width: 31px;
	height: 31px;
	margin-right: 10px;
	cursor: pointer;
}

.flexColor {
	display: flex;
	flex-wrap: nowrap;
}

.avator {
	width: 50px;
	height: 50px;
	margin-right: 10px;
}

.labelWrapper {
	display: inline-block;
	position: relative;
	margin: 0 10px;
	border: 1px solid rgba(204, 204, 204, 1);
	border-radius: 6px;
	cursor: pointer;

	input {
		display: none;
	}

	div {
		width: 69px;
		text-align: center;
		box-sizing: border-box;
		line-height: 30px;

		.style1 {
			border-width: 0px;
			width: 52px;
			height: 25px;
			background: inherit;
			background-color: rgba(129, 211, 248, 1);
			border: none;
			border-radius: 16px;
			border-top-left-radius: 0px;
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;
			display: inline-block;
		}

		.style2 {
			border-width: 0px;
			width: 52px;
			height: 25px;
			background: inherit;
			background-color: rgba(129, 211, 248, 1);
			border: none;
			border-radius: 16px;
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;
			display: inline-block;
		}

		.style3 {
			border-width: 0px;
			width: 52px;
			height: 25px;
			background: inherit;
			background-color: rgba(129, 211, 248, 1);
			border: none;
			border-radius: 6px;
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;
			display: inline-block;
		}
	}

	input:checked+div {
		// 通过 padding 解决抖动问题
		position: relative;
		border-radius: 6px;

		&::after {
			content: url("/robotConfigImg/check-circle-fill.png");
			color: #fff;
			position: absolute;
			top: calc(100% - 10px);
			right: -9px;
			z-index: 999;
		}
	}
}

.knowledge_configuration {
	:global {
		.ant-tabs-content {
			padding: 0px !important;
		}

		.ant-tabs-tab {
			width: unset !important;
		}

		.ant-tabs-tabpane {
			padding: 0px !important;
		}

		.ant-tabs-tab-active {
			background: #ffffff !important;
		}
	}
}

.channel_setting {
	:global {
		.ant-tabs-content {
			padding: 0px !important;
		}

		.ant-tabs-tab {
			width: unset !important;
		}

		.ant-tabs-tabpane {
			padding: 0px !important;
		}

		.ant-tabs-tab-active {
			background: #ffffff !important;
		}
	}
}

.appearance_settings {

	:global {
		.ant-form-extra {
			font-size: 13px;
			font-weight: 500;
			color: #90a1b1;
			padding-top: 10px;
		}
	}
}

.customCard {
	position: relative;
	height: 185px;
	margin-bottom: 20px;

	.top {
		width: 96%;
		height: 160px;
		background: #2b47e6;
		border: 2px solid #ffffff;
		opacity: 0.4;
		border-radius: 16px;
		position: absolute;
		left: 2%;
	}

	.content {
		position: absolute;
		top: 10px;
		width: 100%;
		height: 100%;
		border: 2px solid #ffffff;
		border-radius: 16px;
		padding: 20px;
    
    .name {
      font-weight: bold;
      color: #333333;
      // border-left: 2px solid #333;
      // padding-left: 12px;
      height: 14px;
      font-size: 14px;
      line-height: 14px;
      width: 100%;
      word-break: keep-all;
      text-overflow: ellipsis;
      overflow: hidden;
    }

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			word-break: keep-all;
      margin-top: 10px;

      .tag {
        height: 24px;
        line-height: 16px;
        background: #22ac38;
        border-radius: 2px;
        font-size: 12px;
        color: #ffffff;
        padding: 4px;
        box-sizing: border-box;
        width: 70px;
        text-align: center;
      }

			.action {
				background: #FFFFFF;
				box-shadow: 0px 2px 5px 0px rgba(62, 91, 255, 0.35);
				border-radius: 14px;
				font-size: 12px;
				font-family: PingFang SC;
				font-weight: bold;
				color: #3E5BFF;
				padding: 5px 8px;
				cursor: pointer;
				border: 1px solid #3E5BFF;

				span {
					vertical-align: middle;
				}

				img {
					vertical-align: middle;
					margin-right: 5px;
				}

				.settingImg {
					display: inline-block;
				}

				.settingImgH {
					display: none;
				}
			}

			.action:hover {
				background: #3E5BFF;
				color: #FFFFFF;

				.settingImgH {
					display: inline-block;
				}

				.settingImg {
					display: none;
				}
			}
		}

		.footer {
			margin-top: 32px;

			.col {
				text-align: center;

				div:first-child {
					color: #ffa41c;
					font-size: 20px;
				}

				div:last-child {
					color: #333;
					font-size: 13px;
				}
			}
		}
	}
}

.channelSet {
	.title {
		text-align: center;
		margin-bottom: 24px;
		display: inline-block;
		font-size: 14px;
		width: auto;
		height: 40px;
		padding: 0 5px;
		background: #FFFFFF;
		box-shadow: 0px 2px 4px 0px rgba(6, 0, 1, 0.12);
		border-radius: 4px;
		font-weight: 500;
		color: #333333;
	}

	.infoTitle {
		font-size: 14px;
		color: #333333;
		margin-bottom: 20px;
		border-left: 2px solid #4b5475;
		padding-left: 10px;
	}
}

.titlep {
	padding: 8px 25px 8px 25px;
	border-left: 2px solid #3f4959;
	background: #f7f9fc;
	color: #000;
	display: inline-block;
	margin-bottom: 20px;
	font-weight: bold;
}

.codeBox {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.code {
	border: 1px solid #D9D9D9;
	border-radius: 4px;
	word-wrap: break-word;
	word-break: break-all;
	overflow: hidden;
	padding: 20px 15px;
	width: calc(100% - 150px);
	background: #FFFFFF;
	line-height: 25px;
	margin: 8px 0;
}

.copyButton {
	margin-left: 20px;
}

.robotBox {
	:global .ant-card {
		background: #F2F3F5;

		.ant-card-actions {
			background: #ffffff;
		}

		.ant-avatar>img {
			width: 28px;
			height: 28px;
			margin: 0 auto;
			margin-top: 10px;
		}

		.ant-avatar.ant-avatar-icon {
			font-size: 28px;
		}
	}

	.cardTag {
		position: absolute;
		// top: -39px;
		top: -33px;
		// right: -39px;
		right: -43px;
		background: rgba(150, 166, 255, 1);
		color: white;
		/* padding: 10px; */
		transform: rotate(45deg);
		// width: 80px;
		width: 100px;
		height: 80px;
		font-size: 13px;
		text-align: center;
		line-height: 134px;
	}
}